<template>

<div class="da">
  <div class="dl">登录</div>
    <van-form  >
   <div class="hz">
        <van-field

                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{require:true,message:''}]"


        />
        <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{require:true,message:''}]"

        />
   </div>
        <div style="margin: 16px;width: 300px; padding: 0px 30px" class="tj">
            <van-button round block type="info" @click="tjClick">提交</van-button>
        </div>
    </van-form>
    <div data-v-22fbe753 class="left-bottom-sign"></div>
    <div data-v-22fbe753 class="right-top-sign"></div>
    <div class="qita"><router-link to ="zhuce">还没有账号？马上注册</router-link></div>
</div>



</template>

<script>
    import {Notify} from 'vant';
    import Vue from 'vue';
    import axios from 'axios';
    import { ContactEdit } from 'vant';
    import { doLogin } from '@/api/login';

    export default {
        name: "login",
        data(){
            return{
                username:'',
                password:''
            }
        },
        methods:{
            tjClick(){
                console.log("用户点击了")
                const username = this.$data.username
                const password = this.$data.password
                var Data ={
                    username: username,
                    password: password
                }
                //判断用户名和密码是否为空
                const requestData=JSON.stringify(Data)
                if(username != '' && password != ''){

                   // 发起登录请求
                    //将数据转化为javascript对象

                  //  将javascript对象转换成json数据
                    doLogin(requestData).then(res =>{

                        if(res){
                            const data = res.data

                            const token = data.data.token

                            this.$store.dispatch("setToken",token)

                            //保存令牌到cookies里
                            this.$cookies.set("token",token)

                            this.$router.replace("/index")
                        }

                    })


                }else
                  Notify("请填写表单的信息")
            }
        }

    }
</script>

<style >

    .hz{
    padding: 5px 50px;

    }
    .da{margin-top: 200px;

    }
.dl{
    font-size: 30px;
    margin-bottom: 30px;
    padding: 0px 20px;
}
    .van-button--info {
        color: #fff;
        background-color: #ff6034 !important;
        border: 1px solid #ff6034 !important;

    }
    .van-cell {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 300px !important;
        padding: 10px 16px !important;
        overflow: hidden;
        color: #323233;
        font-size: 14px !important;
        line-height: 24px;
        background-color: #fff;}

    .left-bottom-sign[data-v-22fbe753]{
        position: absolute;
        left: -3.6rem;
        bottom: -4.26667rem;
        border: 1.33333rem solid #d0d1fd;
        border-radius: 50%;
        padding: 2.4rem;
    }
    .right-top-sign[data-v-22fbe753]:before, .right-top-sign[data-v-22fbe753]:after {
        display: block;
        content: "";
        width: 5.33333rem;
        height: 1.06667rem;
        background: #b4f3e2;
    }

</style>